<template>
  <el-table
    ref="table"
    style="width: 100%"
    :data="dateTrans"
    v-model="dateTrans"
    :stripe="true"
    height="700"
    :highlight-current-row="true"
    :row-class-name="highlightRoot"
    @selection-change="selsChange"
    @current-change="handleCurrentChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      v-for="item in tableColumn"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-edit"
          v-if="isUpdateAccess"
          @click="handleEdit(scope.$index, scope.row)" circle></el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          v-if="isDeleteAccess"
          @click="handleDelete(scope.$index, scope.row)" circle></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import data from "../settings/data";
export default {
  name: "Table",
  props: {
    //接收父组件的分页
    pageSize: Number,
    currentPage: Number,
    // isConsumer: Boolean,
    isUpdateAccess: Boolean,
    isDeleteAccess: Boolean,
    tableColumn: {
      type: Array,
      default: function() {
        return data.tableColumn;
      }
    },
    tableData: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      selectedItem: null,
      form: {}
    };
  },
  computed: {
    dateTrans() {
      //从后台获取的无序数组，有序化进行展示
      this.tableData = this.tableData.sort(this.com.sortRole('userId'))
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
  methods: {
    //已放到全局方法里
    // //升序排序,js中方法
    // sortRole (pro) {
    //   return function (a,b) {
    //     var value1 = a[pro];
    //     var value2 = b[pro];
    //     return value1 - value2;
    //   }
    // },
    //超管高亮
    highlightRoot({ row, rowIndex }) {
      if (row.consumer === "超级管理员") {
        return "warning-root";
      } else {
        return "";
      }
    },
    handleCurrentChange(row) {
      this.$emit("change", row);
    },
    //向父组件传sels
    selsChange(sels) {
      sels.forEach(element => {
        if(element.consumer=='超级管理员'){
          this.$message.error('超管不可选中')
          toggleSelection([this.dateTrans[0]])
          return 
        }
      });
      this.$emit("batchSelection", sels);
    },
    handleEdit(index, row) {
      let _index = index + (this.currentPage - 1) * this.pageSize;
      this.form = this.tableData[_index];
      this.dialogFormVisible = true;
      this.$emit("edit", {
        form: this.form,
        dialogFormVisible: this.dialogFormVisible
      });
    },
    handleDelete(index, row) {
      let _index = index + (this.currentPage - 1) * this.pageSize;
      if (this.tableData[_index].consumer == "超级管理员") {
        this.$message.error("删除无效");
      } else {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.form = this.tableData[_index];
            this.$emit("delete", this.form);
            this.tableData.splice(_index, 1);
            console.log(_index);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    }
  },
  mounted() {
   
  }
};
</script>

<style scoped>
.warning-root {
  background: oldlace;
}
</style>
